{%- liquid
  case section.settings.fontsize
    when 'display-4'
      assign bodysize = 'h4'
      assign mark = 'h2'
    when 'display-5'
      assign bodysize = 'h5'
      assign mark = 'h2'
    when 'h1'
      assign bodysize = 'lead'
      assign mark = 'h3'
    when 'h2'
      assign bodysize = 'lead'
      assign mark = 'h4'
    when 'h3'
      assign bodysize = ''
      assign mark = 'h5'
  endcase
-%}
{%- if section.settings.full_width -%}
  {%- if settings.desktop_image != blank -%}
    {%- style -%}
      {%- if settings.desktop_image contains "2x" -%}
        .slide-show-{{ block.id }} .adapt-to-image.responsive-height {
          --image-height: {{ settings.desktop_image.width | divided_by: 2 | divided_by: settings.desktop_image.aspect_ratio }}px;
        }
      {%- else -%}
        .slide-show-{{ block.id }} .container-topic {
          max-width: {{ settings.desktop_image.width }}px;
        }
        .slide-show-{{ block.id }} .adapt-to-image.responsive-height {
          --image-height: {{ settings.desktop_image.height }}px;
        }
      {%- endif -%}
      .slide-show-{{ block.id }} .adapt-to-image::before {
        padding-bottom: {{ 1 | divided_by: settings.desktop_image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
        width: 1px;
        margin-left: -1px;
      }
      @media screen and (max-width: 768px) {
        .slide-show-{{ block.id }} .adapt-to-image::before {
          padding-bottom: {{ 1 | divided_by: settings.mobile_image.aspect_ratio | times: 100 }}%;
        }
      }
      {% comment %}桌面端为模块高度设置一个最小值，为图片高度的 2/3 {% endcomment %}
      @media screen and (min-width: 768px) {
        .slide-show-{{ block.id }} .adapt-to-image {
          min-height: {{ 1920 | divided_by: settings.desktop_image.aspect_ratio | times: 2 | divided_by: 3 }}px;
        }
      }
    {%- endstyle -%}
  {%- endif -%}
{%- else -%}
  {%- if settings.desktop_image != blank -%}
    {%- style -%}
      .slide-show-{{block.id}}  .adapt-to-image::before {
        padding-bottom: {{ 1 | divided_by: settings.desktop_image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
        width: 1px;
        margin-left: -1px;
      }
      @media (max-width: 768px) {
        .slide-show-{{block.id}}  .adapt-to-image::before {
          padding-bottom: {{ 1 | divided_by: settings.mobile_image.aspect_ratio | times: 100 }}%;
        }
      }
    {%- endstyle -%}
  {%- endif -%}
{%- endif -%}


{%- liquid
  assign show_stretched_link = false
  if settings.button_link_1 != blank
    assign stretched_link = settings.button_link_1
    assign show_stretched_link = true
  elsif settings.button_link_2 != blank
    assign stretched_link = settings.button_link_2
    assign show_stretched_link = true
  else
    assign show_stretched_link = false
  endif
%}

{% render 'text-shadow', id: block.id, ammount: settings.text_shadow_ammount %}

{% render 'image-overlay-opacity', id: block.id, ammount: settings.image_overlay_opacity %}

{% if section.settings.full_width %}
  {%- liquid
    case settings.desktop_text_position
      when 'top_left'
        assign desktop_text_position = 'align-items-md-start justify-content-md-start'
      when 'top_center'
        assign desktop_text_position = 'align-items-md-start justify-content-md-center'
        assign text_margin = 'mx-auto'
      when 'top_right'
        assign desktop_text_position = 'align-items-md-start justify-content-md-end'
      when 'middle_left'
        assign desktop_text_position = 'align-items-md-center justify-content-md-start'
      when 'middle_center'
        assign desktop_text_position = 'align-items-md-center justify-content-md-center'
        assign text_margin = 'mx-auto'
      when 'middle_right'
        assign desktop_text_position = 'align-items-md-center justify-content-md-end'
      when 'bottom_left'
        assign desktop_text_position = 'align-items-md-end justify-content-md-start'
      when 'bottom_center'
        assign desktop_text_position = 'align-items-md-end justify-content-md-center'
        assign text_margin = 'mx-auto'
      when 'bottom_right'
        assign desktop_text_position = 'align-items-md-end justify-content-md-end'
      else
        assign desktop_text_position = ''
    endcase
  %}
{% else %}
  {%- liquid
    case settings.desktop_text_position
      when 'top_left'
        assign desktop_text_position = 'align-items-md-start justify-content-md-start'
      when 'top_center'
        assign desktop_text_position = 'align-items-md-start justify-content-md-center'
      when 'top_right'
        assign desktop_text_position = 'align-items-md-start justify-content-md-end'
      when 'middle_left'
        assign desktop_text_position = 'align-items-md-center justify-content-md-start'
      when 'middle_center'
        assign desktop_text_position = 'align-items-md-center justify-content-md-center'
      when 'middle_right'
        assign desktop_text_position = 'align-items-md-center justify-content-md-end'
      when 'bottom_left'
        assign desktop_text_position = 'align-items-md-end justify-content-md-start'
      when 'bottom_center'
        assign desktop_text_position = 'align-items-md-end justify-content-md-center'
      when 'bottom_right'
        assign desktop_text_position = 'align-items-md-end justify-content-md-end'
      else
        assign desktop_text_position = ''
    endcase
  %}
{% endif %}


{%- liquid
  case settings.desktop_text_alignment
    when 'left'
      assign text_alignment = 'text-md-start'
    when 'center'
      assign text_alignment = 'text-md-center'
    when 'right'
      assign text_alignment = 'text-md-end'
    else
      assign text_alignment = ''
  endcase

  case settings.mobile_text_alignment
    when 'left'
      assign text_alignment = text_alignment | append: ' text-start'
    when 'center'
      assign text_alignment = text_alignment | append: ' text-center'
    when 'right'
      assign text_alignment = text_alignment | append: ' text-end'
    else
      assign text_alignment = text_alignment | append: ''
  endcase
%}

{%- liquid
  case settings.mobile_text_position
    when 'top'
      assign mobile_text_position = 'align-items-start'
    when 'center'
      assign mobile_text_position = 'align-items-center'
    when 'bottom'
      assign mobile_text_position = 'align-items-end'
    else
      assign mobile_text_position = ''
  endcase
%}

{%- liquid
  case settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase


  case settings.button_set_style
    when 'solid_with_outline'
      assign first_button_class = 'mx-2 btn-'
      assign second_button_class = 'mx-2 btn-outline-'
      assign parent_class = 'mx-n2'
    when 'solid_with_text_link'
      assign first_button_class = 'mx-3 btn-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
    when 'outline'
      assign first_button_class = 'mx-2 btn-outline-'
      assign second_button_class = 'mx-2 btn-outline-'
      assign parent_class = 'mx-n2'

    when 'outline_with_text_link'
      assign first_button_class = 'mx-3 btn-outline-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
    when 'text_link'
      assign first_button_class = 'mx-3 btn-link link-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
    when 'kiks-btn-primary'
      assign first_button_class = 'kiks-btn-primary '
      assign second_button_class = 'kiks-btn-secondary '
      assign parent_class = 'mx-n2'
    when 'kiks-btn-secondary'
      assign first_button_class = 'kiks-btn-secondary '
      assign second_button_class = 'kiks-btn-primary '
      assign parent_class = 'mx-n2'
  endcase
%}

<div class="slide-show-{{ block.id }}">
  <div class="absolute-center">
    <div class="img-wrapper h-100 rigid-wrapper">
      <picture >
        {% if settings.mobile_image != blank or settings.desktop_image != blank%}
        {% if settings.mobile_image != blank %}
          <source media="(max-width: 767px)" sizes="(max-width: 767px) 100vw, 767px"
            srcset="{{ settings.mobile_image | img_url: '375x' }} 1x,
            {{ settings.mobile_image | img_url: '375x', scale: 2 }} 2x,
            {{ settings.mobile_image | img_url: '375x', scale: 3 }} 3x">
        {% endif %}
        {% if settings.desktop_image != blank %}
          {%- assign picture_height = settings.desktop_image.height -%}
          <img class="object-fit-cover"
            srcset="
              {%- assign height = picture_height | times: 2 | divided_by: 3 | prepend: 'x' -%}
              {{ settings.desktop_image | img_url: height }} 768w,
              {%- assign height = picture_height | times: 3 | divided_by: 4 | prepend: 'x' -%}
              {{ settings.desktop_image | img_url: height }} 1280w,
              {%- assign height = picture_height | prepend: 'x' -%}
              {{ settings.desktop_image | img_url: height }} 1440w,
              {{ settings.desktop_image | img_url: 'master' }} 1920w,"
            src="{{ settings.desktop_image | img_url: '750x' }}"
            loading="lazy"
            alt="{{ settings.desktop_image.alt | escape }}" >
        {% elsif settings.mobile_image != blank %}
            <img class="object-fit-cover"
            srcset="{%- if settings.mobile_image.width >= 414 -%}{{ settings.mobile_image | img_url: '414x' }} 414w,{%- endif -%}
              {%- if settings.mobile_image.width >= 600 -%}{{ settings.mobile_image | img_url: '600x' }} 600w,{%- endif -%}
              {%- if settings.mobile_image.width >= 828 -%}{{ settings.mobile_image | img_url: '828x' }} 828w,{%- endif -%}
              {%- if settings.mobile_image.width >= 1000 -%}{{ settings.mobile_image | img_url: '1000x' }} 1000w,{%- endif -%}
              {%- if settings.mobile_image.width >= 1200 -%}{{ settings.mobile_image | img_url: '1780x' }} 1200w,{%- endif -%}
              {%- if settings.mobile_image.width >= 2400 -%}{{ settings.mobile_image | img_url: '2000x' }} 2400w,{%- endif -%}
              {%- if settings.mobile_image.width >= 3840 -%}{{ settings.mobile_image | img_url: '3840x' }} 3840w,{%- endif -%}"
              src="{{ settings.mobile_image | img_url: '750x' }}"
              loading="lazy"
              alt="{{ settings.mobile_image.alt | escape }}" >
        {% endif %}
        {% else %}
          <div class="object-fit-cover img-placeholder h-100">
            {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
          </div>
        {% endif %}
      </picture>
      {%- comment -%} {% if full_width %}
        <picture >
          {% if settings.mobile_image != blank %}
            <source media="(max-width: 767px)" sizes="(max-width: 767px) 100vw, 767px"
              srcset="{{ settings.mobile_image | img_url: '375x' }} 1x,
              {{ settings.mobile_image | img_url: '375x', scale: 2 }} 2x,
              {{ settings.mobile_image | img_url: '375x', scale: 3 }} 3x">
          {% endif %}
          {% if settings.desktop_image != blank %}
            {%- assign picture_height = settings.desktop_image.height -%}
            <img class="object-fit-cover"
              srcset="
                {%- assign height = picture_height | times: 2 | divided_by: 3 | prepend: 'x' -%}
                {{ settings.desktop_image | img_url: height }} 768w,
                {%- assign height = picture_height | times: 3 | divided_by: 4 | prepend: 'x' -%}
                {{ settings.desktop_image | img_url: height }} 1280w,
                {%- assign height = picture_height | prepend: 'x' -%}
                {{ settings.desktop_image | img_url: height }} 1440w,
                {{ settings.desktop_image | img_url: 'master' }} 1920w,"
              src="{{ settings.desktop_image | img_url: '750x' }}"
              loading="lazy"
              alt="{{ settings.desktop_image.alt | escape }}" >
          {% elsif settings.mobile_image != blank %}
              <img class="object-fit-cover"
              srcset="{%- if settings.mobile_image.width >= 414 -%}{{ settings.mobile_image | img_url: '414x' }} 414w,{%- endif -%}
                {%- if settings.mobile_image.width >= 600 -%}{{ settings.mobile_image | img_url: '600x' }} 600w,{%- endif -%}
                {%- if settings.mobile_image.width >= 828 -%}{{ settings.mobile_image | img_url: '828x' }} 828w,{%- endif -%}
                {%- if settings.mobile_image.width >= 1000 -%}{{ settings.mobile_image | img_url: '1000x' }} 1000w,{%- endif -%}
                {%- if settings.mobile_image.width >= 1200 -%}{{ settings.mobile_image | img_url: '1780x' }} 1200w,{%- endif -%}
                {%- if settings.mobile_image.width >= 2400 -%}{{ settings.mobile_image | img_url: '2000x' }} 2400w,{%- endif -%}
                {%- if settings.mobile_image.width >= 3840 -%}{{ settings.mobile_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                src="{{ settings.mobile_image | img_url: '750x' }}"
                loading="lazy"
                alt="{{ settings.mobile_image.alt | escape }}" >
          {% endif %}
          {% if settings.desktop_image == blank and settings.mobile_image == blank %}
            <div class="object-fit-cover img-placeholder h-100">
              {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
            </div>
          {% endif %}
        </picture>
      {% else %}
        <picture>
          {% if settings.mobile_image != blank %}
            <source media="(max-width: 1023px)" sizes="(max-width: 1023px) 100vw, 1023px"
              srcset="{%- if settings.mobile_image.width >= 480 -%}{{ settings.mobile_image | img_url: '480x' }} 480w,{%- endif -%}
              {%- if settings.mobile_image.width >= 720 -%}{{ settings.mobile_image | img_url: '720x' }} 720w,{%- endif -%}
              {%- if settings.mobile_image.width >= 960 -%}{{ settings.mobile_image | img_url: '960x' }} 960w,{%- endif -%}
              {%- if settings.mobile_image.width >= 1440 -%}{{ settings.mobile_image | img_url: '1440x' }} 1440w,{%- endif -%}
              {%- if settings.mobile_image.width >= 1920 -%}{{ settings.mobile_image | img_url: '1920x' }} 1920w,{%- endif -%}">
          {% endif %}
          {% if settings.desktop_image != blank %}
            <img width="auto" height="auto" class="object-fit-cover {% if section.settings.full_width %} {% else %} rounded-3 {% endif %}"
              srcset="{%- if settings.desktop_image.width >= 480 -%}{{ settings.desktop_image | img_url: '480x' }} 480w,{%- endif -%}
                {%- if settings.desktop_image.width >= 720 -%}{{ settings.desktop_image | img_url: '720x' }} 720w,{%- endif -%}
                {%- if settings.desktop_image.width >= 960 -%}{{ settings.desktop_image | img_url: '960x' }} 960w,{%- endif -%}
                {%- if settings.desktop_image.width >= 1200 -%}{{ settings.desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if settings.desktop_image.width >= 1440 -%}{{ settings.desktop_image | img_url: '1440x' }} 1440w,{%- endif -%}
                {%- if settings.desktop_image.width >= 1920 -%}{{ settings.desktop_image | img_url: '1920x' }} 1920w,{%- endif -%}
                {%- if settings.desktop_image.width >= 2400 -%}{{ settings.desktop_image | img_url: '2400x' }} 2400w,{%- endif -%}"
              src="{{ settings.desktop_image | img_url: '960x' }}"
              loading="lazy"
              alt="{{ settings.desktop_image.alt | escape }}" >
          {% elsif section.settings.mobile_image != blank %}
            <img width="auto" height="auto" class="object-fit-cover"
              srcset="{%- if settings.mobile_image.width >= 480 -%}{{ settings.mobile_image | img_url: '480x' }} 480w,{%- endif -%}
              {%- if settings.mobile_image.width >= 720 -%}{{ settings.mobile_image | img_url: '720x' }} 720w,{%- endif -%}
              {%- if settings.mobile_image.width >= 960 -%}{{ settings.mobile_image | img_url: '960x' }} 960w,{%- endif -%}
              {%- if settings.mobile_image.width >= 1440 -%}{{ settings.mobile_image | img_url: '1440x' }} 1440w,{%- endif -%}
              {%- if settings.mobile_image.width >= 1920 -%}{{ settings.mobile_image | img_url: '1920x' }} 1920w,{%- endif -%}
              {%- if settings.mobile_image.width >= 2400 -%}{{ settings.mobile_image | img_url: '2400x' }} 2400w,{%- endif -%}"
              src="{{ section.settings.mobile_image | img_url: '960x' }}"
              loading="lazy"
              alt="{{ section.settings.mobile_image.alt | escape }}" >
          {% endif %}
          {% if settings.desktop_image == blank and settings.mobile_image == blank %}
            <div class="object-fit-cover img-placeholder h-100">
              {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
            </div>
          {% endif %}
        </picture>
      {% endif %} {%- endcomment -%}
    </div>
    {% if enable_image_link %}
      {% if show_stretched_link %}
        <a  {% if stretched_link contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ stretched_link }}" class="stretched-link"></a>
      {% endif %}
    {% endif %}
  </div>
  {%- if has_image_overlay_opacity -%}
    <div class="absolute-center bg-black hero-image-overlay-opacity-{{ block.id }}"></div>
  {%- endif -%}
  <div class="{{ image_height }} position-relative d-flex">
    <div class="container py-section pb-8">
      <div data-="{{ section.settings.full_width }}" class="h-100 {% if section.settings.full_width == false %}col-lg-10 mx-lg-auto{% endif %}">
        <div class="h-100 row {{ mobile_text_position }} justify-content-center {{ desktop_text_position }}">
          <div class="text-content hero-text-shadow-overlay-{{ block.id }} {{ text_margin }} {% if settings.overline == blank %}mt-n2{% endif %} {{ text_alignment }} {{ text_color }} {{ settings.text_width }}">
            {%- if settings.overline != blank -%}
              <p class="mb-2 fs-6">{{ settings.overline }}</p>
            {%- endif -%}

            {%- if settings.heading != empty -%}
              <{{ mark }} class="{{ section.settings.fontsize }} fw-bold mb-0">{{ settings.heading }}</{{ mark }}>
            {%- endif -%}
            {%- if settings.text != blank -%}
              <div class="{{ bodysize }} fw-normal mt-2 no-last-margin richtext-with-link {{ richtext_link_style }}">
                {{ settings.text }}
              </div>
            {%- endif -%}
            {% if settings.button_label_1 != blank or settings.button_label_2 != blank %}  
              <div class="mt-md-5 mt-4">
                <div class="mt-n2 {{ parent_class }}">
                  {% if settings.button_label_1 != blank or settings.button_label_2 != blank %}
                      {%- if settings.button_label_1 != blank -%}
                        {%- if settings.button_link_1 != blank -%}
                          <a {% render 'link', link: settings.button_link_1 %} href="{{ settings.button_link_1 }}" class="kiks-btn {% if settings.enable_solid_primary_button %}kiks-btn-primary {% endif %}btn {{ first_button_class }}{{ btn_style }} with-stretched-link mt-2">
                            {{ settings.button_label_1 }}
                          </a>
                        {%- else -%}
                          <div class="{% if settings.enable_solid_primary_button %}kiks-btn-primary {% endif %}btn {{ first_button_class }}{{ btn_style }} with-stretched-link mt-2 disabled cursor-default">
                            {{ settings.button_label_1 }}
                          </div>
                        {%- endif -%}
                      {%- endif -%}
                      {%- if settings.button_label_2 != blank -%}
                        {%- if settings.button_link_2 != blank -%}
                          <a {% render 'link', link: settings.button_link_2 %} href="{{ settings.button_link_2 }}" class="kiks-btn {% if settings.enable_solid_secondary_button %}kiks-btn-secondary {% endif %}btn {{ second_button_class }}{{ btn_style }} with-stretched-link mt-2">
                            {{ settings.button_label_2 }}
                          </a>
                          {%- else -%}
                          <div class="{% if settings.enable_solid_secondary_button %}kiks-btn-secondary {% endif %} kiks-btn btn {{ second_button_class }}{{ btn_style }} with-stretched-link mt-2 disabled cursor-default">
                            {{ settings.button_label_2 }}
                          </div>
                        {%- endif -%}
                      {%- endif -%}
                  {% endif %}
                </div>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
